<template>
  <div class="infinite-container">
    <div class="lefttime">
      状态：{{pageData.consultStatus | filterMedicalStatus}}
      <span
        v-if="pageData.leftTimeTxt!=='已超时'"
      >(剩余时间{{pageData.leftTimeTxt}})</span>
      <span v-else>(已超时)</span>
    </div>
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="总费用">
          <span slot="right" class="feeText">￥{{pageData.cost}}</span>
        </mu-list-item>
        <mu-divider />
        <mu-list-item :title="payTypeText">
          <span slot="right" class="feeText">￥{{pageData.cost}}</span>
        </mu-list-item>
      </mu-list>
    </div>
    <div class="mt10"></div>
    <pay-method busType="7" v-show="illPayType != 'medInsurance'" @typeChange="payTypeChange"></pay-method>
    <div
      class="lefttime"
      v-show="illPayType == 'medInsurance'"
      style="height: auto; line-height: auto"
    >
      <span>温馨提示：您的本次配药挂号费已挂帐，到医院后可在人工收费窗口或自助机通过医保卡进行结算。</span>
    </div>
    <div class="longBtnC">
      <mu-raised-button
        label="立即支付"
        fullWidth
        class="submit-btn"
        primary
        @click="pay"
        :disabled="isCanPay"
        v-if="illPayType != 'medInsurance'"
      ></mu-raised-button>
      <mu-raised-button label="确认" fullWidth primary @click="pay" :disabled="isCanPay" v-else></mu-raised-button>
    </div>
  </div>
</template>

<script>
import payMethod from "../../components/payMethod.vue";
import TimeCounter from "../../components/TimeCounter.js";
import { commonAjaxJson, RESTFUL_API, commonAjax } from "@/api/api";
import wxPay from "../../api/wxPay.js";

export default {
  data() {
    return {
      hospitalCode: sessionStorage.hospitalCode || "1",
      pageData: {},
      familyPerson: JSON.parse(sessionStorage.familyPerson || "{}"),
      agtOrderNumber: "",
      timeCounter: null,
      param: {},
      payTypeText: "自费金额",
      illPayType: sessionStorage.getItem("illPayType"),
      payType: "1"
    };
  },
  computed: {
    isCanPay() {
      return this.pageData.leftTimeTxt === "已超时";
    }
  },
  components: {
    payMethod
  },
  mounted() {
    this.loadPageData();
  },
  methods: {
    payTypeChange(val) {
      this.payType = val;
    },
    loadPageData() {
      if (!this.$route.query.cid) {
        this.$store.commit("UPDATE_TOAST", {
          message: "页面错误!"
        });
        return;
      }
      this.param.id = this.$route.query.cid;
      
      commonAjaxJson(RESTFUL_API.getConsultDetails, this.param, true).then(
        res => {
          
          if (res) {
            res.data.data.leftTimeTxt = "-:-";
            if (!this.timeCounter) {
              this.timeCounter = new TimeCounter(res.data.data.payRemainingSeconds || 0);
            }
            this.timeCounter.timeChangCallback = splash => {
              var txt = this.timeCounter.calTime(
                res.data.data.createTime,
                splash
              );
              res.data.data.leftTimeTxt = txt;
            };
            this.timeCounter.start();
            if (res.data.data.medInsurance == 1) {
              this.payTypeText = "医保挂账金额";
            } else {
              this.payTypeText = "自费金额";
            }
            this.pageData = res.data.data;
          } else {
            this.$store.commit("UPDATE_TOAST", {
              message: "服务器内部错误!"
            });
          }
        }
      );
    },
    pay() {
      if (this.illPayType == "medInsurance") {
        // 医保
        let param = {
          consultId: this.pageData.consultId,
          departmentCode: this.pageData.deptCode,
          doctorCode: this.pageData.doctCode,
          parentVisitNo: this.pageData.hisPreVisitNo
        };
        
        commonAjaxJson("/consult/app/paymentConfirm", param, true).then(res => {
          
          if (res.data.code == 200) {
            this.$router.push({
              path: "/medicalAgain/medInsurPaySuccess"
            });
          } else {
            this.$store.commit("UPDATE_TOAST", {
              message: res.data.message
            });
          }
        });
      } else {
        // 自费
        let body = {
          busType: 7,
          departmentCode: this.pageData.deptCode || "",
          doctorCode: this.pageData.doctCode || "",
          patientCode: this.pageData.patientCode,
          consultId: this.pageData.consultId || "",
          parentVisitNo: this.pageData.hisPreVisitNo || ""
        };
        let param = {
          hospitalCode: this.hospitalCode,
          amt: this.pageData.cost,
          name: this.pageData.personName,
          payType: this.payType,
          body: JSON.stringify(body),
          mobile: this.pageData.phoneNo
        };
        console.log(JSON.stringify(param));
        let storeData = {
          consultId: this.pageData.consultId,
          consultStatus: this.pageData.consultStatus,
          doctorCode: this.pageData.doctCode,
          doctorName: this.pageData.doctName,
          doctorId: this.pageData.doctId
        };
        localStorage.setItem("medicalAgainPayData", JSON.stringify(storeData));
        window.location.href =
          "app://medicalAgainPay?param=" + JSON.stringify(param);
      }
    },
    payOk() {
      let param = {
        tradeNo: this.agtOrderNumber
      };
      commonAjax("pay/payProcessTrade", param, true).then(res => {
        if (res.data.code == 200) {
          console.log("his收到");
        }
      });
      this.$router.replace({
        path: "/medicalAgain/payOk"
      });
    },
    payFail() {
      this.$router.replace({
        path: "/payResult",
        query: {
          result: "fail",
          backPath: `/medicalAgain/confirmPay?cid=${this.pageData.consultId}`,
          backName: "重新支付"
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/vars";
@import "../../common/css/component";

.infinite-container {
  @{deep} .mu-item-left img {
    width: 30px;
    height: 30px;
  }
  @{deep} .mu-item.show-left {
    padding-left: 60px;
  }
  @{deep} .mu-item-title {
    color: #333;
  }
  @{deep} .mu-item-text {
    color: #ccc;
  }
  @{deep} .mu-item {
    min-height: 60px;
  }
  .lefttime {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #ff6600;
    background: #fffdce;
  }
}
</style>
